<script setup lang="ts">
import { ref } from 'vue'
import { Toast } from 'vant'

const checked = ref(true)
const checked2 = ref(true)

const i = ref(0)

setInterval(() => {
  i.value += Number((Math.random() * 100).toFixed(2))
}, 3000)
const clear = () => {
  Toast.loading({
    message: '清理中...',
    forbidClick: true
  })
  setTimeout(() => {
    Toast.success('清理完成')
  }, 2000)
  setTimeout(() => {
    i.value = 0
  }, 3000)
}
</script>

<template>
  <div class="settings-page">
    <!-- nav组件 -->
    <cp-nav-bar title="设置" />

    <div class="card">
      <van-cell title="个人资料" is-link value="去填写" />
      <van-cell title="账号管理" is-link />
      <br />

      <van-cell center title="自动草稿">
        <template #right-icon>
          <van-switch v-model="checked" size="24" inactive-color="#dcdee0" />
        </template>
      </van-cell>
      <van-cell center title="消息通知">
        <template #right-icon>
          <van-switch v-model="checked2" size="24" inactive-color="#dcdee0" />
        </template>
      </van-cell>

      <van-cell title="隐私设置" is-link />
      <van-cell title="清理缓存" is-link :value="`${i} M`" @click="clear" />
      <br />
      <van-cell title="去好评" is-link />
      <van-cell title="推荐给朋友" is-link />
      <van-cell title="隐私政策" is-link />
      <van-cell title="个人信息收集清单" is-link />
      <van-cell title="第三方共享信息清单" is-link />
      <van-cell title="关于我们" is-link />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.settings-page {
  padding: 46px 0 80px;
}
.card {
  background: rgb(245, 248, 248);
}
</style>
